<template>
<div>
  <div><input v-model="searchMsg"><mybut @click="search" show-icon icon="icon-sousuo"></mybut></div>
  <mybut @click.native="$refs.simpleDialog.visible=true">添加</mybut>
  <simple-dialog ref="simpleDialog" @confirm="addArticle"></simple-dialog>
  <simple-dialog ref="editDialog" @confirm="editItem"></simple-dialog>
<div class="title">
<div class="item">文章ID</div>
<div class="item">文章标题</div>
<div class="item">文章名称</div>
<div class="item">作者</div>
<div class="item">操作</div> 
</div>
<div>
  <div class="content"  v-for="(obj,index) in articleList" :key="index">
    <div class="item">{{obj.id}}</div>
    <div class="item">{{obj.title}}</div>
    <div class="item">{{obj.label}}</div>
    <div class="item">{{obj.author}}</div>
    <div class="item">
      <mybut @click="shiwEdutDualog(index)">编辑</mybut>
      <mybut @click="deleteArticle(index)">删除</mybut>
    </div>
  </div>
</div> 
</div>
</template>

<script>
import mybut from '../lesson9/mybut.vue';
import axios from "axios"
import SimpleDialog from '../lesson11and12/SimpleDialog.vue';
export default {
  components: { mybut, SimpleDialog },
  data(){
      return{
          editIndex:0,
          searchMsg:"",
          allChecked:false,
          articleList:[],
          articleList2:[]
      }
  },
  methods:{
      getArticleList(){
          axios.get("http://mymock/list").then((res)=>{
              console.log(res)
              this.articleList=res.data
              this.articleList2=res.data
          })
      },
          addArticle(item){
      this.articleList.push(item);
    },
    deleteArticle(index){
      this.articleList.splice(index,1)
    },
    editItem(data){
      for(let key in data){
        this.articleList[this.editIndex][key]=data[key];
      }
    },
    shiwEdutDualog(index){
      this.editIndex=index;
      this.$refs.editDialog.show(this.articleList[index]);
    },
    search(){
      if(this.searchMsg){
        this.articleList=this.articleList2.filter((item)=>{
          return item.title===this.searchMsg;
        });
      }else{
        this.articleList=this.articleList2;
      }
    }
  },
  created(){
      this.getArticleList()
  }
  }
</script>

<style>

</style>